<template>
  <div class="outpage">
    <Spin fix v-show="loading">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>加载中...</div>
    </Spin>
    <iframe
      marginheight="0"
      marginwidth="0"
      frameborder="0"
      scrolling="yes"
      :src="path"
      id="iframe"
      @load="onload"
      ref="myIframe"
      v-show="!loading"
    >
    </iframe>
  </div>
</template>

<script>
import {getPath} from '@/api/outPath'

export default {
  name: 'OutPage',
  data(){
    return {
      path: '',
      loading: true
    }
  },
  created(){
    this.getOutPath()
  },
  watch: {
    $route:{
      handler:'resetData',
    }
  },
  methods:{
    getOutPath(){
      getPath(this.$route.name).then(res =>{
        if(res.data.status && res.data.data){
          this.path = res.data.data.path
        }
      })
    },
    resetData() {
      this.loading = true
      getPath(this.$route.name).then(res =>{
        if(res.data.status && res.data.data){
          this.path = res.data.data.path
        }
      })
    },
    onload(){
      this.loading = false
    }
  },
  mounted(){
    this.loading = true
  }
}
</script>

<style lang="less">
.outpage{
  width: 100%;
  height: 100%;
  #iframe{
    width: 100%;
    //min-height: ~"calc(100vh - 207px)";
    min-height: 850px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
}
</style>
